/*
 * 学生详情->平台业务数据->高校洗衣机数据
 * @Author: ice
 * @Date: 2018-09-27 19:33:31
 * @Last Modified by: ice
 * @Last Modified time: 2018-10-08 14:47:06
 */
<template>
    <div class="plt-washer-wrap clearfix">
        <template v-if="data">
            <div class="number-box">
                <div class="number-box-title">订单总数</div>
                <div class="number-box-value">
                    <div class="number">{{ data.order_num }}</div>
                    <div class="unit">条</div>
                </div>
            </div>
            <div class="number-box">
                <div class="number-box-title">订单总额</div>
                <div class="number-box-value">
                    <div class="number">{{ data.order_money }}</div>
                    <div class="unit">元</div>
                </div>
            </div>
            <div class="number-box">
                <div class="number-box-title">退款次数</div>
                <div class="number-box-value">
                    <div class="number">{{ data.refund_num }}</div>
                    <div class="unit">次</div>
                </div>
            </div>
            <div class="number-box">
                <div class="number-box-title">退款金额</div>
                <div class="number-box-value">
                    <div class="number">{{ data.refund_money }}</div>
                    <div class="unit">元</div>
                </div>
            </div>
            <div class="number-box">
                <div class="number-box-title">洗衣单数</div>
                <div class="number-box-value">
                    <div class="number">{{ data.order_num_wash }}</div>
                    <div class="unit">条</div>
                </div>
            </div>
            <div class="number-box">
                <div class="number-box-title">洗衣消费</div>
                <div class="number-box-value">
                    <div class="number">{{ data.order_money_wash }}</div>
                    <div class="unit">元</div>
                </div>
            </div>
            <div class="number-box">
                <div class="number-box-title">烘干单数</div>
                <div class="number-box-value">
                    <div class="number">{{ data.order_num_dry }}</div>
                    <div class="unit">条</div>
                </div>
            </div>
            <div class="number-box">
                <div class="number-box-title">烘干消费</div>
                <div class="number-box-value">
                    <div class="number">{{ data.order_money_dry }}</div>
                    <div class="unit">元</div>
                </div>
            </div>
            <div class="number-box">
                <div class="number-box-title">会员费</div>
                <div class="number-box-value">
                    <div class="number">{{ data.fee }}</div>
                    <div class="unit">元</div>
                </div>
            </div>
            <div class="number-box">
                <div class="number-box-title">手机下单比</div>
                <div class="number-box-value">
                    <div class="number">{{ data.mobile_percent }}</div>
                    <div class="unit">%</div>
                </div>
            </div>

        </template>
        <div
            class="empty"
            v-else>
            <div class="empty-img"/>
            <div class="empty-msg">暂无数据</div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            data: '',
            loading: false,
            hd_user_no: '',
        };
    },
    methods: {
        init() {
            this.hd_user_no = this.$route.query.hd_user_no ? this.$route.query.hd_user_no : '';
            if(this.hd_user_no && !this.data){
                this.fnGetData();
            }
        },
        fnGetData() {
            this.loading = true;
            this.$post('/studata/platform%5Cwashing%5Cget', {
                hd_user_no: this.hd_user_no
            }, resp => {
                this.loading = false;
                if(resp.code == 1){
                    this.data = resp.data;
                }else{
                    // this.$message({
                    //     type: 'warning',
                    //     message: resp.msg,
                    //     center: true
                    // });
                }
            });
        }
    }
};

</script>

<style lang="less" scoped>
    .plt-washer-wrap {
      padding: 20px;
      padding-right: 0;
      padding-top: 0;
      box-sizing: border-box;
    }
    .number-box {
      width: 264px;
      margin: 0 20px 20px 0;
      float: left;
      background: #fff;
      border-radius: 2px;
      padding: 20px 24px;
      &-title {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
      }
      &-value {
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        .number {
          font-size: 40px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 38px;
          padding: 0;
        }
        .unit {
          font-size: 24px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
          line-height: 30px;
          margin-left: 5px;
          padding: 0;
        }
      }
    }
</style>